<template>
  <!-- 谷歌验证器绑定 -->
  <view>
    <view class="lidator-text">
      <text class="lidator-num">1</text>
      <text>从官方应用商店下载谷歌验证器</text>
    </view>
    <view class="lidator-text">
      <text class="lidator-num">2</text>
      <text>将账户名称和密钥复制粘贴到谷歌验证器中，也可以直接扫描下方二维码</text>
    </view>
    <!-- 账户名称和密钥开始 -->
    <view class="userinfo">
      <text class="user-text">账户名称</text>
      <view class="user-ipt">
        <input type="text" value="" placeholder="请输入账户名称"/>
        <image src="../../static/copy.png" mode=""></image>
      </view>
    </view>
    <view class="userinfo">
      <text class="user-text">密钥</text>
      <view class="user-ipt">
        <input type="text" value="" placeholder="请输入密钥"/>
        <image src="../../static/copy.png" mode=""></image>
      </view>
    </view>
    <!-- 账户名称和密钥结束 -->
    <view class="qrcode-box">
      <view class="qrcode-img">
        <image src="../../static/qrcode.png" mode=""></image>
      </view>
      <view class="">
        请妥善备份账户名称和密钥以防遗失
      </view>
    </view>
    <view class="btn-bottom">
      <button type="primary">输入验证码绑定</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>
  page{
    color: #FFFFFF;
    padding: 40rpx;
  }
    .lidator-text{
      display: flex;
      justify-content: flex-start;
      font-size: 32rpx;
      margin-bottom: 40rpx;
    }
    .lidator-num{
      height: 44rpx;
      font-size: 26rpx;
      padding:0 14rpx;
      background-color: #141a2c;
      border: 1rpx solid #5b5c69;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }
    .userinfo{
      margin: 10rpx 0;
    }
    .user-text{
      font-size: 26rpx;
      color: #7c7c8c;
    }
    .user-ipt{
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;
      border-bottom: 1px solid #141414;
    }
    .user-ipt{
      width: 95%;
      padding-bottom: 10rpx;
    }
    .user-ipt image{
      width: 40rpx;
      height: 40rpx;
    }
    .btn-bottom{
      position: fixed;
      bottom: 40rpx;
      width: 90%;
    }
    .qrcode-box{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 400rpx;
      background-color: #16192a;
      margin-top: 40rpx;
      text-align: center;
    }
    .qrcode-img{
      width: 200rpx;
      height: 200rpx;
    }
    .qrcode-img image{
      width: 100%;
      height: 100%;
    }
</style>
